<template>
  <div class="page-container">
    <div class="title">NavMenu 导航菜单</div>
    <div class="desc">为网站提供导航功能的菜单。</div>

    <div class="item-title">侧栏</div>
    <div class="example">
      <jhbNavMenu :menuList="menuList"></jhbNavMenu>
    </div>
  </div>
</template>

<script>
import jhbNavMenu from "pkgs/JHB-nav-menu/src";
export default {
  components: {
    jhbNavMenu,
  },
  data() {
    return {
      menuList: [
        {
          title: '首页',
          icon: 'el-icon-location'
        },
        {
          title: '业务管理',
          icon: 'el-icon-location',
          children: [
            {
              title: '产品管理',
              icon: ''
            },
            {
              title: '分润方案',
              icon: ''
            },
            {
              title: '营销方案',
              icon: ''
            },
            {
              title: '提现税点',
              icon: ''
            },
            {
              title: '活动奖励',
              icon: ''
            },
            {
              title: '机构业务开通',
              icon: ''
            }
          ]
        },
        {
          title: '用户管理',
          icon: 'el-icon-location',
          children: [
            {
              title: '成员管理',
              icon: ''
            }
          ]
        },
      ]
    }
  },
  methods: {
    cellClick(row) {
      this.dialog.Visible = true;
      console.log("固定列操作返回", row);
    },
    sizeChanges(row) {
      console.log("固定列操作返回", row);
    },
    currentChanges(row) {
      console.log("固定列操作返回", row);
    },
  },
};
</script>

<style lang="scss" scoped>
  .page-container {
    display: flex;
    flex-direction: column;
    .title {
      font-size: 28px;
      font-weight: 400;
      color: #1f2f3d;
    }
    .desc {
      font-size: 14px;
      color: #5e6d82;
      padding: 14px 0;
      border-bottom: 1px solid #ebebeb;
      margin-bottom: 20px;
    }
    .item-title {
      font-size: 20px;
      margin: 26px 0;
      font-weight: 400;
      color: #1f2f3d;
    }
    .item-title:first-child {
      margin-top: 0;
    }
    .page-item {
      display: flex;
      // justify-content: space-between;
      align-items: center;
    }
    .example {
      width: 224px;
      box-sizing: border-box;
    }
  }
</style>
